<template>
	<view class="content">
		<NavBar />

		<!-- 背景图 -->
		<image src="../../static/yezi.png" class="page-bg" mode="widthFix"></image>
		<!-- 标题图 -->
		<image src="../../static/title.png" class="page-title" mode="widthFix"></image>

		<!-- 搜索框 -->
		<input type="text" v-model="searchWord" placeholder="在这里输入你要查询的物品" class="search-input">

		<!-- 热门搜索词 -->
		<view class="word-list">
			<view class="word-tag" v-for="w in wordList" @click="setSearchWord(w)">
				{{w}}
			</view>
		</view>
		<!-- 搜索按钮 -->
		<button class="search-btn" @click="toSearch">开始查询</button>
	</view>
</template>

<script>
	import StatusBar from '@/components/StatusBar.vue'
	import NavBar from '@/components/NavBar.vue'
	export default {
		data() {
			return {
				searchWord: "",
				wordList: ["瓶子", "灯管", "塑料包装袋", "灭火器", "充电宝", "剩菜剩饭"],
			}
		},
		components: {
			NavBar
		},

		onLoad(option) {},
		methods: {
			setSearchWord(w) {
				this.searchWord = w
			},
			async toSearch() {
				console.log("开始查询")

				uni.showLoading()

				if (this.searchWord) {

					// 请求云函数
					const res = await uniCloud.callFunction({
						name: 'garbage',
						data: {
							prompt: {
								thing: this.searchWord
							}

						}
					})

					console.log('识别结果：', res)

					uni.hideLoading()

					// 将结果保存到store中，然后跳转结果页面
					this.$store.commit('saveResult', {
						keyword: this.searchWord,
						classify: res.result?.reply
					})

					uni.redirectTo({
						url: "/pages/search/result"
					})

				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100%;
		position: relative;
	}

	.page-bg {
		width: 100%;
		height: 100%;
	}

	.page-title {
		width: 90%;
		position: absolute;
		top: 210px;
		left: 5%;
	}

	.search-input {
		width: 90%;
		height: 70px;
		border: solid 3px black;
		background-color: #EEEEEE;
		border-radius: 70px;
		text-align: center;
		font-size: 16px;
		position: absolute;
		left: 5%;
		top: 400px;
	}

	.word-list {
		position: absolute;
		top: 500px;
		width: 90%;
		margin-left: 5%;
		display: flex;
		flex-wrap: wrap;

		.word-tag {
			background-color: #DEDEDE;
			padding: 10px 20px;
			border-radius: 20px;
			margin: 6px;
		}
	}

	.search-btn {
		width: 217px;
		height: 70px;
		line-height: 70px;
		position: absolute;
		bottom: 150px;
		left: 50%;
		transform: translateX(-50%);
	}
</style>